<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>统一地图平台</title>
    <style>
        html,
        body,
        #mapui {
            width: 100%;
            height: 100%;
        }

        html,
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="mapui"></div>

    <script src="./js_example/script/map.min.js"></script>
    <script>
        var amap = null;
        var that = this;
        map.Factory.create('mapui', {
            center: [106.17609405517578, 35.41583177128595],
            fullExtent: {
                xmin: 90.992204,
                ymin: 10.979711,
                xmax: 120.5338915,
                ymax: 50.543712
            },
            zoom: 1,
            projection: 'EPSG:4326',
            strategy: ['mapboxgl', 'openlayers']
        }, (o) => {
            amap = o;
            // that.init(amap.pmap);

            map.Factory.ClusterMap('MapboxClusterMap', (clusterMap) => {

                var randomCount = 100000;


                var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京",
                    "合肥", "杭州", "南昌",
                    "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳",
                    "昆明", "拉萨", "海口"
                ];

                var features = {
                    "type": "FeatureCollection",
                    "features": []
                }

                // 构造数据
                while (randomCount--) {
                    var cityCenter = special_mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math
                        .random() * citys
                        .length)]);
                    features.features.push({
                        type: "Feature",
                        geometry: {
                            type: 'Point',
                            coordinates: [cityCenter.lng - 5 + Math.random() * 10, cityCenter
                                .lat - 5 + Math
                                .random() * 10
                            ]
                        }
                    });
                }



                clusterMap.loadClusterMap(amap, features ||
                    './js_thematic_map_example/data/earthquakes.geojson', {
                        pointImagePath: './js_thematic_map_example/images/marker.png',
                        textLayerOption: {
                            layout: {
                                "text-field": "{point_count_abbreviated}",
                                "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
                                "text-size": 18
                            }
                        },
                        pointLayerOption: {
                            layout: {
                                'icon-size': 0.3
                            },
                            paint: {
                                'icon-color': '#337DBC'
                            }
                        },
                        clusterMaxZoom: 16
                    });
            });
        });


        function init(map) {

            map.addSource("earthquakes", {
                type: "geojson",
                data: "./js_thematic_map_example/data/earthquakes.geojson",
                cluster: true,
                clusterMaxZoom: 14, // Max zoom to cluster points on
                clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
            });

            map.addLayer({
                id: "clusters",
                type: "circle",
                source: "earthquakes",
                filter: ["has", "point_count"],
                paint: {
                    "circle-color": [
                        "step",
                        ["get", "point_count"],
                        "#51bbd6",
                        100,
                        "#f1f075",
                        750,
                        "#f28cb1"
                    ],
                    "circle-radius": [
                        "step",
                        ["get", "point_count"],
                        20,
                        100,
                        30,
                        750,
                        40
                    ]
                }
            });

            map.addLayer({
                id: "cluster-count",
                type: "symbol",
                source: "earthquakes",
                filter: ["has", "point_count"],
                layout: {
                    "text-field": "{point_count_abbreviated}",
                    "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
                    "text-size": 12
                }
            });

            map.addLayer({
                id: "unclustered-point",
                type: "circle",
                source: "earthquakes",
                filter: ["!", ["has", "point_count"]],
                paint: {
                    "circle-color": "#11b4da",
                    "circle-radius": 4,
                    "circle-stroke-width": 1,
                    "circle-stroke-color": "#fff"
                }
            });

            map.on('click', 'clusters', function (e) {
                var features = map.queryRenderedFeatures(e.point, {
                    layers: ['clusters']
                });
                var clusterId = features[0].properties.cluster_id;
                map.getSource('earthquakes').getClusterExpansionZoom(clusterId, function (err, zoom) {
                    if (err)
                        return;

                    map.easeTo({
                        center: features[0].geometry.coordinates,
                        zoom: zoom
                    });
                });
            });

            map.on('mouseenter', 'clusters', function () {
                map.getCanvas().style.cursor = 'pointer';
            });
            map.on('mouseleave', 'clusters', function () {
                map.getCanvas().style.cursor = '';
            });
        }
    </script>
</body>

</html>